<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<script type="text/javascript" class="autoinsert" src="../js/jquery-2.2.0.min.js"></script>
		<!-- bootstrap规定使用前置设置 -->
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<link href="../bootstrap-3.3.7-dist/css/bootstrap.css" rel="stylesheet" type="text/css" />
		<script type="text/javascript" src="../bootstrap-3.3.7-dist/js/bootstrap.js"></script>
		<link rel="stylesheet" href="../font-awesome-4.7.0/css/font-awesome.min.css">
		<link rel="stylesheet" type="text/css" href="../css/admin_fog.css" />
		<script type="text/javascript" class="autoinsert" src="../js/layer.js"></script>
		<link rel="stylesheet" type="text/css" href="../css/layer.css" />
		<title>监测列表</title>
		<link rel="stylesheet" type="text/css" href="../css/admin_top.css" />
		<script type="text/javascript" src="../js/admin_top.js"></script>
		<link rel="stylesheet" type="text/css" href="../css/admin_left.css" />
		<script type="text/javascript" src="../js/admin_left.js"></script>
		<link rel="shortcut icon" href="../img/icon.jpg">
	</head>
	<body>

        <div id="left"></div>
        <div id="top"></div>

		<div class="main">
			<div class="goodsindex" id="app">
				<!-- 搜索条件 -->
				<el-row :gutter="20" class="goodsindex-queryInfo">
					<!-- 商品名称搜索 -->
					<el-col :xs="8" :sm="6" :md="6" :lg="4" :xl="4">
						<el-input class="goodsindex-queryInfo-li" v-model="queryInfo.city" clearable size="small" placeholder="请输入城市名称"></el-input>
					</el-col>
					<!-- 商品分类搜索 -->
					<el-col :xs="8" :sm="6" :md="6" :lg="4" :xl="4">
						<el-select class="goodsindex-queryInfo-li" v-model="queryInfo.level" size="small" clearable placeholder="请选择浓雾等级">
							<el-option
									v-for="items in classify"
									:key="items.id"
									:label="items.name"
									:value="items.id">
							</el-option>
						</el-select>
					</el-col>
					<el-col :xs="6" :sm="4" :md="3" :lg="2" :xl="2">
						<el-button type="primary" class="goodsindex-queryInfo-li" size="small" @click="searchFogLevel">搜索</el-button>
					</el-col>
					<el-col :xs="6" :sm="4" :md="3" :lg="2" :xl="2">
						<el-button type="success" class="goodsindex-queryInfo-li" size="small" @click="addFogLevel">添加</el-button>
					</el-col>
				</el-row>
				<!-- 检索结果 -->
				<el-row :gutter="20" class="goodsindex-list">
					<el-col :span="24">
						<el-table :data="tableData" border size='small' style="width: 100%">
							<el-table-column type="index" label="序号" width="60"></el-table-column>
							<el-table-column prop="id" label="ID" width="50"></el-table-column>
							<el-table-column prop="city" label="城市名称" width="120"></el-table-column>
							<el-table-column prop="province" label="所在省份" width="120"></el-table-column>
							<el-table-column label="实时图片">
								<template slot-scope="scope">
									<el-popover placement="top-start" trigger="click"> <!--trigger属性值：hover、click、focus 和 manual-->
										<a :href="['http://nitcs.ahalk.cn/img/'+scope.row.url]" target="_blank" title="查看最大化图片">
											<img :src="['http://nitcs.ahalk.cn/img/'+scope.row.url]" width="500">
										</a>
										<img slot="reference" :src="['http://nitcs.ahalk.cn/img/'+scope.row.url]" height="100" style="cursor:pointer">
									</el-popover>
								</template>
							</el-table-column>
							<el-table-column prop="value" label="浓雾值" width="100"></el-table-column>
							<el-table-column prop="level_temp" label="浓雾等级" width="80"></el-table-column>
							<el-table-column prop="date" label="记录时间" width="180"></el-table-column>
							<el-table-column label="操作">
								<template slot-scope="scope">
									<el-button type="primary" class="one_buttom" size="small" @click="updateFogLevel(scope.row.id)">编辑</el-button>
									<el-button type="danger" class="one_buttom" size="small" @click="deleteFogLevel(scope.row.id)">删除</el-button>
								</template>
							</el-table-column>
						</el-table>
					</el-col>
				</el-row>
				<!-- 分页 -->
				<el-row :gutter="20" class="goodsindex-list">
					<el-col :span="24" class="goodsindex-page-box">
						<el-pagination
								:hide-on-single-page="false"
								@size-change="handleSizeChange"
								@current-change="handleCurrentChange"
								:current-page="queryInfo.page"
								:page-sizes="[10, 20, 50, 100]"
								:page-size="queryInfo.pageSize"
								layout="total, sizes, prev, pager, next, jumper"
								:total="queryInfo.totalNum">
						</el-pagination>
					</el-col>
				</el-row>
			</div>
		</div>

	</body>

    <script type="text/javascript">
        $("#top").load("top.html");
        $("#left").load("left.html");
    </script>

	<!-- 引入vue -->
	<script type="text/javascript" src="../js/vue.js"></script>
	<script type="text/javascript" src="../js/vue-resource.min.js"></script>

	<!-- 引入ElementUI -->
	<script type="text/javascript" src="../ElementUI/index.js"></script>
	<link rel="stylesheet" type="text/css" href="../ElementUI/index.css"/>

	<script type="text/javascript" src="../js/admin_fog.js"></script>

</html>
